<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school :activeList="activeList" load-school @click="schoolChange"
                    @visible="threeSchoolVisible=$event"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div :style="threeSchoolVisible ? '' : 'padding-left: 16px'">
          <b style="margin-bottom:4px; display: inline-block;">所属学校：{{ schoole_name || '暂无学校' }}</b>
          <el-form
              inline size="mini"
              :model="query"
              class="ele-form-search"
              @keyup.enter.native="reload"
              @submit.native.prevent>
            <el-form-item label="年级:">

              <el-select style="width:100%" clearable
                         :disabled="!query.schoole_id"
                         v-model="query.grade_id"
                         placeholder="请输入年级">
                <el-option :value="item.id" :label="item.title" v-for="(item,index) in gradeList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="班级:">

              <el-select style="width:100%" clearable
                         :disabled="!query.grade_id"
                         v-model="query.class_id"
                         placeholder="请输入班级">
                <el-option :value="item.id" :label="item.title" v-for="(item,index) in classList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="性别:">
              <el-select
                  clearable
                  v-model="query.gender"
                  placeholder="请选择性别"
                  class="ele-fluid">
                <el-option label="男" :value="1"/>
                <el-option label="女" :value="2"/>
                <el-option label="未知" :value="0"/>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                  style="width: 125px"
                  clearable
                  v-model="query.belong_time"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-input
                  clearable
                  v-model="query.keywords"
                  placeholder="输入姓名或学号等关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="toolbar-box" style="margin-bottom:4px;">
          <div class="tool-btn">
            <el-button
                size="mini"
                type="default"
                icon="el-icon-download"
                class="ele-btn-icon"
                @click="exportExcel">导出
            </el-button>
          </div>
        </div>
        <!-- 数据表格 -->
        <el-table
            border
            lazy
            ref="table"
            :data="data"
            v-loading="loading"
            height="calc(100vh - 315px)"
        >
          <el-table-column label="序号" width="55" align="center" type="index">
            <template slot-scope="scope">
                <span
                    v-text="$setTableIndex(query.page, query.limit, scope.$index)"
                >
                </span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间" align="center" prop="create_time">
            <template slot-scope="scope">{{ $util.toDateString(scope.row.create_time) }}</template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="name"/>
          <el-table-column label="学号" align="center" prop="student_no"/>
          <el-table-column label="性别" align="center" prop="gender">
            <template slot-scope="scope">
              {{ scope.row.gender === 0 ? '未知' : scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="年级" align="center" prop="grade_name"/>
          <el-table-column label="班级" align="center" prop="class_name"/>
          <el-table-column label="学校" align="center" prop="schoole_name"/>
          <!--  <el-table-column label="进入时间" align="center" prop="in_time" >
              <template slot-scope="scope">{{$util.toDateString(scope.row.in_time)}}</template>
            </el-table-column> -->
          <el-table-column label="离开时间" align="center" prop="out_time">
            <template slot-scope="scope">{{ $util.toDateString(scope.row.out_time) }}</template>
          </el-table-column>
          <el-table-column label="报警内容" align="center" prop="da_type_name">
          </el-table-column>
          <el-table-column label="是否已处理" align="center" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status === 0 ? '未处理' : scope.row.status === 1 ? '已处理' : '' }}
            </template>
          </el-table-column>
          <el-table-column label="处理时间" align="center" prop="update_time">
            <template slot-scope="scope">{{ scope.row.status === 1 ? $util.toDateString(scope.row.update_time) : '' }}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              :resizable="true"
          >
            <template slot-scope="{row}">
              <el-link
                  type="text"
                  :underline="false"
                  icon="el-icon-edit"
                  @click="edit(row)">编辑
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="getData"
        />
      </el-card>
    </div>
    <!-- 体温弹窗 -->
    <student-alarm-edit
        :data="current"
        :visible.sync="showEdit"
        @done="reload"/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import studentAlarmEdit from './studentAlarm-edit'
import threeSchool from "@/components/three_schoole.vue";

export default {
  name: 'SystemSchool',
  components: {threeSchool, studentAlarmEdit},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      threeSchoolVisible: true,
      row_span: 20,
      activeList: [],
      loading: false, // 表格加载状态
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [], // 表格数据接口
      // 表格搜索条件
      query: {
        page: 1,
        limit: 10,
        province_code: '',
        city_code: '',
        district_code: '',
        streets_code: '',
        schoole_id: '',
        grade_id: '',
        class_id: '',
        gender: ''
      },
      // streetsList: [],
      schoolList: [],
      gradeList: [],
      classList: [],
      // 当前编辑数据
      current: null,
      showEdit: false,
      schoole_name: '',
      schoole_id: ''
    };
  },
  mounted() {
    this.getDataInt();
  },
  watch: {
    // 'query.streets_code': {
    //   handler: function () {
    //         this.getSchoolList()
    //   },
    //   deep:true
    // },
    'query.schoole_id': {
      handler: function () {
        this.getGradeList()
      },
      deep: true
    },
    'query.grade_id': {
      handler: function () {
        this.getClassList()
      },
      deep: true
    }
  },
  methods: {
    getDataInt() {
      this.$http
          .get("/schoole/index", {
            params: {
              page: 1,
              limit: 1,
            },
          })
          .then((res) => {
            if (res.data.count == 0) return;
            this.schoole_name = res.data.data[0].title
            this.schoole_id = res.data.data[0].id
            this.query = {
              page: 1,
              limit: 20,
              title: "",
              schoole_id: res.data.data[0].id,
              schoole_name: res.data.data[0].title,
            };
            this.activeList = [
              res.data.data[0].province_code,
              res.data.data[0].city_code,
              res.data.data[0].district_code,
              res.data.data[0].streets_code,
            ];
            this.getData();
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
    },
    schoolChange(data) {
      this.query = {
        page: 1,
        limit: 10,
        title: "",
        schoole_id: data.value,
        schoole_name: data.label,
      };
      this.schoole_name = data.label
      this.schoole_id = data.value
      this.getData();
    },
    // getSchoolList() {
    //   this.$http
    //     .get("/user/getSchoolList", { params: { streets_code: this.query.streets_code } })
    //     .then(res => {
    //       this.schoolList = res.data.data;
    //     })
    //     .catch(e => {
    //       this.$message.error(e.message);
    //     });
    // },
    getGradeList() {
      this.$http
          .get("/student/getGrade", {params: {schoole_id: this.query.schoole_id}})
          .then(res => {
            this.gradeList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
    },
    getClassList() {
      this.$http
          .get("/student/getClass", {params: {grade_id: this.query.grade_id, schoole_id: this.query.schoole_id}})
          .then(res => {
            this.classList = res.data.data;
          })
          .catch(e => {
            this.$message.error(e.message);
          });
    },
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.$http
          .get("/resortlog/index", {params: this.query})
          .then(res => {
            this.loading = false;
            this.total = res.data.count;
            this.data = res.data.data;
          })
          .catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query = {
        page: 1,
        limit: 10,
        schoole_name: this.schoole_name,
        schoole_id: this.schoole_id
      };
      this.reload();
    },
    /* 显示编辑 */
    edit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 导出数据Excel */
    exportExcel() {
      let info = JSON.parse(JSON.stringify(this.query));
      this.$http
          .get("/resortlog/exportExcel", info)
          .then((res) => {
            let data = res.data;
            if (data.code == 0) {
              // 下载文件
              window.location.href = data.data;
              this.$message({
                type: "success",
                message: "导出成功",
              });
            } else {
              this.$message.error("导出失败");
            }
          })
    },
  }
}
</script>

<style scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
